<!--
 * @Descripttion: 库存查询列表
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-12 15:07:44
 -->
<template>
  <div class="app-container">
    <div class="border-gay padding20 clearfix">
      <div class="clearfix">
        <div class="fl">
          <span class="color-gay">
            时间：{{ _time }}
          </span>
        </div>
        <div class="fr">
          <el-input
            v-model="searchData.keywords"
            class="w300"
            clearable
            style="width: 360px"
            placeholder="按单据编号,客户名称搜索"
            @keydown.enter.native="btnSearch"
          />
          <el-button type="primary" :loading="btnLoading.search" @click="btnSearch()">
            搜索
          </el-button>
          <el-button type="default" :loading="btnLoading.export" @click="btnSearch()">
            导出
          </el-button>
        </div>
      </div>
    </div>
    <div class="margin-t20">
      <vxe-grid
        ref="table"
        class="grid margin-t10"
        border
        resizable
        highlight-hover-row
        :loading="tableLoading.table"
        :edit-config="{trigger: 'click', mode: 'row'}"
        :columns="columnsData"
        :data="tableData.table"
      />
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.size"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.current"
        :total="pageInfo.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import Affix from '@/components/Affix'
import { listBillDetailByDate } from '@/api/report/sale.js'
import Chart from '@/views/report/components/chart.vue'
import moment from 'moment'

export default {
  name: 'DetailByGoods',
  filters: {
  },
  // eslint-disable-next-line vue/no-unused-components
  components: { Affix, Chart },
  mixins: [oftenuse],
  props: {
    time: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      searchData: {},
      columnsData: [
        { title: '序号', width: 60, fixed: 'left', align: 'center',
          slots: {
            default: (params) => {
              const { seq } = params
              const { direction } = params.row
              if (direction === '1') return [<el-tag type='danger'>退货</el-tag>]
              const value = seq
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'billNo', title: '单据编号', width: 150, showOverflow: true },
        { field: 'comegoName', title: '客户名称', width: 200, showOverflow: true },
        { field: 'amountPayable', title: '销售额', align: 'right', width: 120 },
        { field: 'priceCostTotal', title: '成本额', align: 'right', width: 120 },
        { field: 'grossProfit', title: '销售毛利', align: 'right', width: 100,
          slots: {
            default: ({ row }) => {
              const { amountPayable, priceCostTotal } = row
              const value = this.$amount(amountPayable)
                .subtract(priceCostTotal).format()
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'amountDiscount', title: '折扣额', align: 'right', width: 100 },
        { field: 'amountOther', title: '其他费用', align: 'right', width: 100 }
      ]
    }
  },
  computed: {
    _time: function() {
      return moment(this.time).format('YYYY-MM-DD')
    }
  },
  watch: {
  },
  created() {
    this.initData()
  },
  methods: {
    btnSearch() {
      this.getReportData(this.dataObj.showBy)
    },
    // api
    initData() {
      this.initSearchData()
      this.getReportData()
    },
    initSearchData() {
      this.$set(this.searchData, 'time', this.time)
    },
    getReportData() {
      const params = {
        page: this.pageInfo,
        data: this.searchData
      }
      this.setTableLoading('table', true)
      listBillDetailByDate(params).then(res => {
        this.setTableLoading('table', false)
        if (!res.data.flag) return
        const { records, total } = res.data.data
        this.setTableData('table', records)
        this.pageInfo.total = total
      })
    },
    // on
    onSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
      this.getStockLogByGood()
    },
    onCurrentChange(val) {
      this.pageInfo.current = val
      this.getStockLogByGood()
    },
    onShowByChange(val) {
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
